<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>所有商品</title>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
  <script type="text/javascript" src="../layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <ul class="layui-nav" style="text-align: right;" height="50px">
      	<li class="layui-nav-item">
    		<a href="index.html">首页<span class="layui-badge-dot"></span></a>
  		</li>
  		<li class="layui-nav-item">
    		<a href="shopcart.html">购物车<span class="layui-badge">3</span></a>
  		</li>
  		<li class="layui-nav-item">
    	  <a href="http://127.0.0.1:8080/JackMa/frontPage/me.jsp"><img src="../images/me.JPG" class="layui-nav-img">我</a>
    	  <dl class="layui-nav-child">
	      	<dd><a href="javascript:;">修改信息</a></dd>
	      	<dd><a href="javascript:;">退出</a></dd>
    	  </dl>
  		</li>
	  </ul>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="index.html" title="">
            "Spend Jack Ma's Money"
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入要查询的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base commodity-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="#" class="active">所有商品</a>
            <a href="information.html">市场资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="commod-cont-wrap">
      <div class="commod-cont w1200 layui-clear">
        <div class="left-nav">
          <div class="title">全部分类</div>
          <div class="list-box">
            <dl>
             <dt>家电数码</dt>
             <dd><a href="javascript:;">手机</a></dd>
             <dd><a href="javascript:;">平板电脑</a></dd>
             <dd><a href="javascript:;">笔记本电脑</a></dd>
            </dl>
            <dl>
             <dt>围巾帽子</dt>
             <dd><a href="javascript:;">围巾披肩</a></dd>
             <dd><a href="javascript:;">手套</a></dd>
             <dd><a href="javascript:;">帽子</a></dd>
             <dd><a href="javascript:;">丝巾</a></dd>
            </dl>
            <dl>
             <dt>珠宝首饰</dt>
             <dd><a href="javascript:;">手链手镯</a></dd>
             <dd><a href="javascript:;">项链吊坠</a></dd>
             <dd><a href="javascript:;">戒指指环</a></dd>
            </dl>
            <dl>
             <dt>高端出行</dt>
             <dd><a href="javascript:;">深度体验</a></dd>
             <dd><a href="javascript:;">新车订购</a></dd>
             <dd><a href="javascript:;">超跑租赁</a></dd>
            </dl>
            <dl>
             <dt>土地房产</dt>
             <dd><a href="javascript:;">复式高层</a></dd>
             <dd><a href="javascript:;">独栋别墅</a></dd>
             <dd><a href="javascript:;">摩天大厦</a></dd>
            </dl>
          </div>
        </div>
        
        <div class="right-cont-wrap">
          <div class="right-cont">
            <div class="cont-list layui-clear layui-container" id="list-cont">
            <!--商品展示框  -->
            	

            </div>
            
            <div id="page" style="text-align: center;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<script>

  layui.config({
	  base: '../js/util/'
  }).use(['mm','laypage', 'element'],function(){
      var laypage = layui.laypage,$ = layui.$,mm = layui.mm;
       laypage.render({
        elem: 'page',
        theme: '#2b2a2a',
        count: 26
      });


//       var html = demo.innerHTML;
//       var listCont = document.getElementById('list-cont');
//       console.log(layui.router("#/about.html"))
//       mm.request({
//          url: '../json/commodity.json',
//          success : function(res){
//            console.log(res)
//            listCont.innerHTML = mm.renderHtml(html,res)
//          },
//          error: function(res){
//            console.log(res);
//          }
//        })

    $('.sort a').on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
    })
    $('.list-box dt').on('click',function(){
      if($(this).attr('off')){
        $(this).removeClass('active').siblings('dd').show()
        $(this).attr('off','')
      }else{
        $(this).addClass('active').siblings('dd').hide()
        $(this).attr('off',true)
      }
    })
    
    
    function initData(){
  	  $.ajax({
  		  type:'GET',
  		  dataType:"json",
  		  url:"${path}/action/goods/list",
  		  
  		  success:function(res){
  			  var data = res.data,count = res.count;
  			  var s= "";
  			  for(var i=0;i<count;i++){
  				  s += '<div class="item layui-container"><div class="img"><a href="javascript:;"><img id="picture" src="'
  				  +data[i].imgPath+
  				  '"height="120px" width="200px"></a></div><div class="text layui-row"><p class="price"><span class="pri">'
  				  +data[i].price+
  				  '</span></p><p class="title">'
  				  +data[i].title+
  				  '</p></div><div class="layui-row"><div class="layui-col-md8"><input type="number" id="Mansion House" class="layui-input" value="0" style="max-width: 100px; text-align: left;"></div><div class="layui-col-md4"><button name="buy" class="layui-btn layui-btn-radius">购买</button></div></div></div>';

  			  }
  			  $("#list-cont").html(s);
  		  }
  	  });
    }
    
    initData();


});
  
 
</script>


</body>
</html>